<template>
  <view class="projectInfo">
    <view class="coinbankHeader">
      <view class="text">
        <uni-icons
          type="left"
          @click="skip1"
        ></uni-icons>
      </view>
      <view class="title"> {{ $t('mining.text20') }} </view>
      <image
        src="../../../static/coinbankHeader.png"
        @click="skip"
      ></image>
    </view>
    <view class="coinbankCenter">
      <view class="pledgeCoins">
        <view class="tokenTitle">
          <img
            :src="productInfo.logoUrl"
            alt=""
          />
          <view class="tokenName">{{ productInfo.name }}</view>
          <view
            class="state"
            v-if="productInfo.enableFlag == 1 && productInfo.isEnd == 0"
            >{{ $t('home.text4') }}</view
          >
          <view
            class="state1"
            v-else
            >{{ $t('mining.text29') }}</view
          >
        </view>

        <view class="viewidendInfo">
          <view class="left">{{ $t('home.text5') }}</view>
          <view class="right">{{ productInfo.totalDistribution }}</view>
        </view>

        <view class="viewidendInfo">
          <view class="left">{{ $t('mining.text21') }}</view>
          <view class="right">{{ productInfo.cycleDay }}{{ $t('home.text7') }}</view>
        </view>

        <view class="viewidendInfo">
          <view class="left">{{ $t('mining.text22') }}</view>
          <view class="right">{{ productInfo.endTime }}</view>
        </view>
      </view>

      <view class="tabs">
        <view
          class="tabItem"
          @click="tabItemIndex = 0"
          >{{ $t('mining.text23') }}

          <view
            class="line"
            v-show="tabItemIndex == 0"
          ></view>
        </view>
        <view
          class="tabItem"
          @click="tabItemIndex = 1"
        >
          {{ $t('mining.text20') }}
          <view
            class="line"
            v-show="tabItemIndex == 1"
          ></view>
        </view>
      </view>
      <view
        class="pledgeMainBox"
        v-show="tabItemIndex == 0"
      >
        <view
          class="pledgeMain"
          v-for="(pool, index) in productInfo.poolList"
          :key="index"
        >
          <view class="pledgeMainLeft">
            <view class="pledgeMainTitle">
              <img
                :src="pool.logoUrl"
                alt=""
              />
              <span>{{ pool.pledgeCoin }} {{ $t('mining.text15') }} </span>
              <!-- <span>FDUSD 奖池 {{ $t('home.text12') }}</span> -->
            </view>

            <view class="participationInfo">
              <view class="info">
                <span>{{ $t('home.text13') }}</span>
                <span style="font-weight: bold">{{ pool.memberCount }}</span>
              </view>

              <view class="info">
                <span>{{ $t('home.text14') }}</span>
                <span style="font-weight: bold">{{ pool.pledgeNum }}</span>
              </view>
            </view>
          </view>
          <view class="pledgeMainRight">
            <view @click="open(pool)">
              {{ $t('home.text12') }}
            </view>

            <view @click="openRedemptionPopup(pool)"> {{ $t('mining.text12') }} </view>
          </view>
        </view>
      </view>

      <view
        class="tabsContent"
        v-show="tabItemIndex == 1"
      >
        <view class="tabsContentTitle">{{ $t('mining.text24') }} </view>
        <view class="tabsContentTips">{{ productInfo.summary }} </view>

        <view class="tagBox">
          <view
            v-for="(link, index2) in productInfo.productLinks &&
            JSON.parse(productInfo.productLinks)"
            :key="index2"
            @click="Jump(link.content)"
            >{{ link.name }}</view
          >
        </view>

        <view class="miningPoolTitle"> {{ $t('mining.text25') }} </view>

        <view class="depositCurrency">
          <view
            class="depositCurrencyItem"
            v-for="(pool, index) in productInfo.poolList"
            :key="index"
          >
            <view class="depositCurrencyItemTitle">{{ $t('mining.text28') }} </view>
            <view class="tokenImg">
              <img :src="pool.logoUrl" />
              {{ pool.pledgeCoin }}
            </view>

            <view
              class="infoItem"
              style="margin-top: 30rpx"
            >
              <view class="infoItemText">{{ pool.pledgeCoin }} {{ $t('mining.text26') }}</view>
              <view class="infoItemNum">{{ pool.subTotalDistributionNum }}</view>
            </view>

            <!-- <view class="infoItem" style="margin-top: 30rpx">
              <view class="infoItemText">每小时奖励上限</view>
              <view class="infoItemNum">3600000000.0000</view>
            </view> -->

            <view
              class="infoItem"
              style="margin-top: 30rpx"
            >
              <view class="infoItemText"
                >{{ $t('mining.text3') }}{{ pool.pledgeCoin }}{{ $t('mining.text27') }}</view
              >
              <view class="infoItemNum">{{ pool.pledgeNum }}</view>
            </view>

            <!-- <view class="infoItem" style="margin-top: 30rpx">
              <view class="infoItemText">挖币周期</view>
              <view class="infoItemNum">4天</view>
            </view> -->
          </view>
        </view>
      </view>
    </view>
    <PledgePopup ref="popup"></PledgePopup>
    <RedemptionPopup ref="redemptionPopup"></RedemptionPopup>
  </view>
</template>

<script>
import { productList } from '../../../common/apiString';
import PledgePopup from '../pledgePopup.vue';
import RedemptionPopup from '../redemptionPopup.vue';
export default {
  components: {
    PledgePopup,
    RedemptionPopup
  },
  data() {
    return {
      tabItemIndex: 0,
      productInfo: {},
      itemId: ''
    };
  },
  onLoad(args) {
    this.itemId = args.itemId;
    this.getProductList();
  },

  methods: {
    Jump(url) {
      window.open(url);
    },
    // 获取质押产品列表;
    getProductList() {
      this.$utils.initDataToken({ url: productList, data: {}, type: 'GET' }, (res, msg) => {
        res.forEach(item => {
          if (item.id == this.itemId) this.productInfo = item;
        });
      });
    },
    skip() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    skip1() {
      uni.navigateTo({
        url: '/pages/coinbank/coinbank'
      });
    },
    open(pool) {
      if (this.productInfo.enableFlag == 0 || this.productInfo.isEnd == 1) {
        this.$utils.showLayer(this.$t('mining.text29'));
        return;
      }
      this.$refs.popup._data.productId = this.productInfo.id;
      this.$refs.popup._data.tokenName = pool.pledgeCoin;
      this.$refs.popup.currencyDetail();
      this.$refs.popup.$refs.popup.open();
    },

    openRedemptionPopup(pool) {
      this.$refs.redemptionPopup._data.productId = this.productInfo.id;
      this.$refs.redemptionPopup._data.tokenName = pool.pledgeCoin;
      this.$refs.redemptionPopup.$refs.redemptionPopup.open();
      this.$refs.redemptionPopup.currencyDetail();
    }
  }
};
</script>

<style lang="less" scoped>
.projectInfo {
  height: 100%;
  background: #1f282f;
  .coinbankHeader {
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    .title {
      font-weight: bold;
      color: #fff;
      font-size: 32rpx;
    }
    .text {
      font-weight: bold;
      color: #fff;
      font-size: 32rpx;
      .uni-icons {
        color: #fff !important;
      }
    }
    image {
      width: 34rpx;
      height: 34rpx;
    }
  }

  .coinbankCenter {
    background: #1f282f;
    overflow: scroll;
    .pledgeCoins {
      padding: 0 30rpx;

      .tokenTitle {
        display: flex;
        align-items: center;
        img {
          width: 42rpx;
          height: 42rpx;
        }

        .tokenName {
          font-size: 32rpx;
          font-weight: bold;
          margin-left: 10rpx;
          color: #fff;
        }

        .state {
          padding: 5rpx 12rpx;
          margin-left: 20rpx;
          font-size: 20rpx;
          background: rgba(2, 187, 109, 0.17);
          border-radius: 14rpx;
          color: #1acb6b;
        }

        .state1 {
          padding: 5rpx 12rpx;
          margin-left: 20rpx;
          font-size: 20rpx;
          background: #f1f1f1;
          border-radius: 14rpx;
          color: #999999;
        }
      }

      .viewidendInfo {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 40rpx;
        .left {
          font-size: 24rpx;
          color: #fff;
        }

        .right {
          font-weight: bold;
          font-size: 24rpx;
          color: #fff;
        }
      }
    }

    .tabs {
      padding: 0 30rpx;
      margin-top: 40rpx;
      display: flex;
      align-items: center;
      .tabItem {
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        color: #fff;
        font-weight: bold;
        position: relative;
        .line {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 0;
          width: 52rpx;
          height: 8rpx;
          background: #2f7cf7;
        }
      }
      .tabItem:last-child {
        margin-left: 50rpx;
      }
    }
    .pledgeMainBox {
      padding: 0 30rpx;
      .pledgeMain {
        margin-top: 40rpx;
        height: 208rpx;
        border-radius: 14rpx 14rpx 14rpx 14rpx;
        border: 2rpx solid #475864;
        display: flex;
        justify-content: space-between;

        padding: 30rpx 20rpx;

        .pledgeMainLeft {
          .pledgeMainTitle {
            display: flex;
            align-items: center;
            img {
              width: 44rpx;
              height: 44rpx;
              margin-right: 12rpx;
            }
            span {
              font-weight: bold;
              color: #fff;
            }
          }
          .participationInfo {
            margin-top: 30rpx;
            .info {
              line-height: 45rpx;
              color: #fff;
              font-size: 24rpx;
            }
          }
        }

        .pledgeMainRight {
          display: flex;
          align-items: center;
          justify-content: space-around;
          flex-direction: column;
          view {
            background: #2f7cf7;
            padding: 15rpx 30rpx;
            background: #2f7cf7;
            border-radius: 12rpx 12rpx 12rpx 12rpx;
            color: #fff;
          }
        }
      }
    }
    .tabsContent {
      margin-top: 40rpx;
      padding-bottom: 40rpx;
      .tabsContentTitle {
        font-weight: bold;
        padding: 30rpx;
        color: #ffffff;
      }
      .tabsContentTips {
        font-size: 24rpx;
        color: #888888;
        padding: 0 30rpx;
      }
      .tagBox {
        display: flex;
        flex-wrap: wrap;
        padding-right: 30rpx;

        view {
          margin-top: 30rpx;
          margin-left: 30rpx;
          color: #fff;
          padding: 10rpx 20rpx;
          background: #343e4d;
          border-radius: 8rpx;
          font-size: 20rpx;
          font-weight: bold;
        }
      }

      .miningPoolTitle {
        padding: 0 30rpx;
        margin-top: 30rpx;
        font-weight: bold;
        color: #ffffff;
      }

      .depositCurrency {
        padding: 0 30rpx;

        .depositCurrencyItem {
          margin-top: 40rpx;
          border-radius: 18rpx;
          border: 2rpx solid #475864;
          padding: 34rpx 28rpx;
          .depositCurrencyItemTitle {
            color: #fff;
          }

          .tokenImg {
            margin-top: 12rpx;
            display: flex;
            align-items: center;
            color: #fff;
            font-weight: bold;
            img {
              width: 40rpx;
              height: 40rpx;
              margin-right: 10rpx;
            }
          }
          .infoItem {
            margin-top: 12rpx;
            .infoItemText {
              font-size: 24rpx;
              color: #ffffff;
              line-height: 28rpx;
            }
            .infoItemNum {
              margin-top: 20rpx;
              font-size: 24rpx;
              color: #ffffff;
              line-height: 28rpx;
            }
          }
        }
      }
    }
  }
}
</style>
